import 'package:flutter/material.dart';

void main() {
  // runApp(MyApp());
}

class OrderApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Grid Selection',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: GridSelectionPage(),
    );
  }
}

class GridSelectionPage extends StatefulWidget {
  @override
  _GridSelectionPageState createState() => _GridSelectionPageState();
}

class _GridSelectionPageState extends State<GridSelectionPage> {
  // 模拟数据
  final List<GridItem> items = List.generate(
    10,
        (index) => GridItem(
      id: index,
      title: '选项 ${index + 1}',
      description: '这是选项 ${index + 1} 的描述',
    ),
  );

  int? selectedItemId;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('网格选择示例'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              '请选择一个选项',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 16),
            // 固定高度的网格视图，最多显示6个项目
            Container(
              height: 480, // 每个项目高度80，最多6个项目
              child: GridView.builder(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2, // 每行2个项目
                  childAspectRatio: 2.5, // 宽高比
                  crossAxisSpacing: 16,
                  mainAxisSpacing: 16,
                ),
                itemCount: items.length,
                itemBuilder: (context, index) {
                  final item = items[index];
                  final isSelected = selectedItemId == item.id;

                  return GridItemWidget(
                    item: item,
                    isSelected: isSelected,
                    onTap: () {
                      setState(() {
                        selectedItemId = isSelected ? null : item.id;
                      });
                    },
                  );
                },
              ),
            ),
            SizedBox(height: 16),
            Text(
              '已选择: ${selectedItemId != null ? '选项 ${selectedItemId! + 1}' : '无'}',
              style: TextStyle(fontSize: 16),
            ),
          ],
        ),
      ),
    );
  }
}

// 网格项数据模型
class GridItem {
  final int id;
  final String title;
  final String description;

  GridItem({
    required this.id,
    required this.title,
    required this.description,
  });
}

// 网格项组件
class GridItemWidget extends StatefulWidget {
  final GridItem item;
  final bool isSelected;
  final VoidCallback onTap;

  const GridItemWidget({
    Key? key,
    required this.item,
    required this.isSelected,
    required this.onTap,
  }) : super(key: key);

  @override
  _GridItemWidgetState createState() => _GridItemWidgetState();
}

class _GridItemWidgetState extends State<GridItemWidget> {
  bool _isHovering = false;
  bool _isPressed = false;

  @override
  Widget build(BuildContext context) {
    // 根据不同状态设置不同的样式
    final isSelected = widget.isSelected;
    final isHovering = _isHovering && !isSelected;
    final isPressed = _isPressed && !isSelected;

    Color backgroundColor;
    Color borderColor;
    Color titleColor;
    Color descriptionColor;

    if (isSelected) {
      // 选中状态
      backgroundColor = Colors.blue.withOpacity(0.1);
      borderColor = Colors.blue;
      titleColor = Colors.blue;
      descriptionColor = Colors.blue.withOpacity(0.8);
    } else if (isPressed) {
      // 按压状态
      backgroundColor = Colors.grey.withOpacity(0.2);
      borderColor = Colors.grey;
      titleColor = Colors.black;
      descriptionColor = Colors.grey;
    } else if (isHovering) {
      // 悬停状态
      backgroundColor = Colors.grey.withOpacity(0.1);
      borderColor = Colors.grey;
      titleColor = Colors.black;
      descriptionColor = Colors.grey;
    } else {
      // 默认状态
      backgroundColor = Colors.white;
      borderColor = Colors.grey.withOpacity(0.3);
      titleColor = Colors.black;
      descriptionColor = Colors.grey;
    }

    return MouseRegion(
      onEnter: (_) => setState(() => _isHovering = true),
      onExit: (_) => setState(() {
        _isHovering = false;
        _isPressed = false;
      }),
      child: GestureDetector(
        onTapDown: (_) => setState(() => _isPressed = true),
        onTapUp: (_) => setState(() => _isPressed = false),
        onTapCancel: () => setState(() => _isPressed = false),
        onTap: widget.onTap,
        child: AnimatedContainer(
          duration: Duration(milliseconds: 200),
          decoration: BoxDecoration(
            color: backgroundColor,
            borderRadius: BorderRadius.circular(8),
            border: Border.all(
              color: borderColor,
              width: 1.5,
            ),
            boxShadow: isSelected || isHovering
                ? [
              BoxShadow(
                color: Colors.grey.withOpacity(0.3),
                blurRadius: 4,
                offset: Offset(0, 2),
              ),
            ]
                : [],
          ),
          padding: EdgeInsets.all(12),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                widget.item.title,
                style: TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.bold,
                  color: titleColor,
                ),
              ),
              SizedBox(height: 4),
              Text(
                widget.item.description,
                style: TextStyle(
                  fontSize: 12,
                  color: descriptionColor,
                ),
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
              ),
              // 选中状态指示器
              if (isSelected)
                Container(
                  margin: EdgeInsets.only(top: 8),
                  padding: EdgeInsets.symmetric(horizontal: 8, vertical: 2),
                  decoration: BoxDecoration(
                    color: Colors.blue,
                    borderRadius: BorderRadius.circular(4),
                  ),
                  child: Text(
                    '已选中',
                    style: TextStyle(
                      fontSize: 10,
                      color: Colors.white,
                    ),
                  ),
                ),
            ],
          ),
        ),
      ),
    );
  }
}